<!-- 项目成本构成 -->
<template>
  <div class="content">
    <el-card class="box-card">
      <div slot="header">
        <span style="color: rgb(14, 175, 14);">项目成本构成</span>
        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
      </div>
      <el-select v-model="optionsValue" placeholder="请选择">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
      <div id="costChart" style="width: 100%;height:310px"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: undefined,
      optionsValue: '选项3',
      options: [
        {
          value: '选项1',
          label: '风光一体化防沙治沙'
        },
        {
          value: '选项2',
          label: '三北六期'
        },
        {
          value: '选项3',
          label: '蚂蚁森林'
        },
        {
          value: '选项4',
          label: '蓝旗机器人造林'
        }
      ],
      data: [
        {
          name: "自管",
          value: 10,
        },
        {
          name: "统管",
          value: 20,
        },
        {
          name: "自管1",
          value: 10,
        },
        {
          name: "统管1",
          value: 20,
        },
        {
          name: "统管2",
          value: 20,
        },
      ],
      annularList: [
        { value: 2700, name: "苗木" },
        { value: 3800, name: "人工" },
        { value: 4400, name: "草坪" },
      ],
      colorList: {
        苗木: ["#4292FF", "#7DBAFF"],
        人工: ["#207e8e", "#5ddeE6"],
        草坪: ["#FFB400", "#FFC900"],
      }
    }
  },
  props: {
    tabNum: {
      type: String,
      default: '0'
    }
  },
  watch: {
    tabNum() {
      this.$nextTick(() => {
        this.chart.resize();
      });
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      const ctx = document.getElementById('costChart')
      this.chart = echarts.init(ctx)

      const newAnnularList = this.annularList.map((item) => {
        return {
          ...item,
          itemStyle: {
            color: new echarts.graphic.RadialGradient(0, 0, 1, [
              {
                offset: 0,
                color: this.colorList[item.name][0],
              },
              {
                offset: 1,
                color: this.colorList[item.name][1],
              },
            ]),
          },
        };
      });

      const option = {
        backgroundColor:"#fff",
        // title: {
        //   text: "设备类型分布",
        //   left: "center", // 对齐方式居中
        //   top: "45%", // 距离顶部
        //   textStyle: {
        //     // 文字配置
        //     color: "#000", // 文字颜色
        //     fontSize: 15, // 字号
        //     align: "center", // 对齐方式
        //   },
        // },
        tooltip: {
          show: true,
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          textStyle: {
                align: 'right',
            },
            top: '0%',
            right: '2%',
        },
        series: [
          {
            name: "设备类型分布",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: true,
              position: "outside",
              formatter: (params) => {
                if (params.name == "设备一") {
                  return "{a| " + params.value + "}\n{a| " + params.percent + "%}";
                }
                else if (params.name == "设备二") {
                  return "{b| " + params.value + "}\n{b| " + params.percent + "%}";
                }
                 else {
                  return "{c|" + params.value + "}\n{c| " + params.percent + "%}";
                }
              },
              rich: {
                a: {
                  color: "#4292FF",
                  align: "left",
                  padding: 4,
                },
                b: {
                  color: "#5DDEE6",
                  align: "left",
                  padding: 4,
                },
                c: {
                  color: "#FFC900",
                  align: "left",
                  padding: 4,
                },
          
            
              
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 30,
            },
            data: newAnnularList,
          },
        ],
      };
      this.chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>